<template>
  <div >
    <header>
      <el-row :gutter="0">
        <el-col :span="3">
          <div class="logoer"><img src="../../static/image/logo.png" alt="">二次开发组件</div>
        </el-col>
        <el-col :span="21">
        <el-menu 
        :default-active="activenavIndex"
          background-color="#393D49"
           class="el-menu-demo" mode="horizontal"
           text-color="#fff"
          active-text-color="#ffd04b"
           @select="handleSelect">
          <el-menu-item index="0">数据看板</el-menu-item>
          
          
          <el-menu-item index="1">数据连接</el-menu-item>
            
          <el-menu-item index="2">数据模型</el-menu-item>
          
          <el-menu-item index="3" >数据处理</el-menu-item>
          <el-menu-item index="4" >数据维护</el-menu-item>
          
        </el-menu>
      </el-col>
      </el-row>
    </header>
  </div>
</template>

<script>
export default {
  name: 'header',
   data () {
    return {
        activenavIndex:this.$route.query.activenavIndex
    }
  },
  methods:{
    handleSelect(e){
      switch(e){
        case '0':
        this.$router.push({path:'/dataView',query:{activenavIndex:"0"}})
        break;
        case '2':
        this.$router.push({path:'/dataModel',query:{activenavIndex:"2"}})
        break;
        case '1':
        this.$router.push({path:'/datalink',query:{type:1,activenavIndex:"1"}})
        break;
        case '4':
        this.$router.push({path:'/maintenance',query:{activenavIndex:"4"}})
        break;
        case '3':
        this.$router.push({path:'/proman/manage',query:{activenavIndex:"3"}})
        break;
      }
      console.log(e)
    }
  }
}
</script>

<style scoped>
header{
  background: #393D49;
  height: 60px;
  line-height: 60px;
  color: white;
}
.logoer{
   background: #393D49;
}
.logoer img{
  width: 30px;
  padding: 0 10px;
  vertical-align: middle;
 
}
.el-menu-demo{
  border: none!important;
}
</style>